<template>
    <div :id="id" :style=lineStyle :data="data">
    </div>
</template>

<script>
    export default {
        name: "LineChatr",
        props: {
            height: {type: String, default: '100'},
            id: {type: String,},
            data: {type: Array}
        },
        data() {
            return {
                //折线图的高度
                lineStyle: {height: this.height+'px'},
                //保存echarts实例
                lineChartGraph: null,
            }
        },
        mounted() {
            //dom加载完毕,进行初始化
            this.drawLineGraph(this.id, this.data);
        },
        watch: {
            //监听数据的变换,重绘
            data(){
                this.drawLineGraph(this.id, this.data);
            },
        },
        methods: {
            callresize(){
                this.lineChartGraph.resize();
            },
            drawLineGraph(id, data) {
                this.lineChartGraph = this.$echarts.init(document.getElementById(id), null, {renderer: 'svg'});
                this.lineChartGraph.setOption({
                    tooltip: {show: true,},
                    xAxis: {show: false, boundaryGap: false, type: 'category'},
                    grid: {left: 0, top: 0, right: 0, bottom: 0},
                    yAxis: {show: false, type: 'value'},
                    series: [
                        {
                            symbol: 'none',
                            smooth: false,
                            type: 'line',
                            lineStyle: {color: 'rgb(21, 101, 216)'},
                            areaStyle: {color: 'rgb(231,239,251)'},
                            data: data
                        }
                    ]
                });
            }
        }
    }
</script>

<style scoped>

</style>